import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'flutter widget',
      //应用程序的主题，各种的定制颜色都可以设置，用于程序主题切换
      theme: ThemeData(
        //主题色 蓝色
        primarySwatch: Colors.deepOrange,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text('Stack Widget组件'),
          ),
        body: Column(
          children: <Widget>[
            Text(
                'stack层叠布局和Web中的绝对定位是相似的，子widget可以根据到父容器四个角的位置来确定本身的位置。'
                '绝对定位允许子widget堆叠（按照代码中声明的顺序）。Flutter中使用Stack和Positioned来实现绝对定位，'
                'Stack允许子widget堆叠，而Positioned可以给子widget定位（根据Stack的四个角）',
              style: TextStyle(
                fontSize: 20.0,

              ),
            ),
            Stack(
//              alignment: AlignmentDirectional.topCenter,
//              alignment: AlignmentDirectional.bottomEnd,
              alignment: const FractionalOffset(0.2, 0.2),
              fit: StackFit.loose,
              children: <Widget>[
            /**
             * 发现不添加Align时，CircleAvatar并没有显示为圆形，
             * 设置child为要显示的url时，并不能显示为圆形，只有设置backgroundColor或者backgroundImage时才显示为了圆形
             * radius和minRadius与maxRadius不能同时使用;
             * ClipOval不在Align里面时也不能显示为圆形，ClipOval中image设置为fit: BoxFit.fill才能显示为圆形；
             * BoxDecoration不在Align里面时也不能显示为圆形，BoxDecoration中image设置为fit: BoxFit.fill才能显示为圆形；
             *
                const CircleAvatar({
                Key key,
                this.child,
                this.backgroundColor,//背景色，相当于加载中或加载失败的占位图
                this.backgroundImage,//背景图，相当于加载中或加载失败的占位图
                this.foregroundColor,//前景色，
                this.radius,
                this.minRadius,
                this.maxRadius,
                })
             */
                CircleAvatar(
                  backgroundImage: NetworkImage('https://img13.360buyimg.com/babel/s360x360_jfs/t1/2202/3/10616/194735/5bcf3336Edf45322d/89e7c13209c9ab49.jpg'),
//                  backgroundImage: NetworkImage('https://img13.360buyimg.com/babel/s360x360_jfs/t1/2202/3/10616/194735/5bcf3336Edf45322d/89e7c13209c9ab49.jpg'),
                  radius: 150.0,
                ),
                Container(
                  decoration: BoxDecoration(
                    color: Colors.green
                  ),
                  padding: EdgeInsets.all(5.0),
                  child: Text('这是悬浮的文字'),
                ),
                Positioned(
                  top: 10.0,
                  left: 50.0,
                  child: Text('这是左上角文字'),
                ),
                Positioned(
                  bottom: 10.0,
                  right: 0.0,
                  child: Text('这是右下角文字'),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}